<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue computed</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
       
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",     
        data: {
            a: 1,
            b: 2,
            c: {
                val:{
                    num: 1
                }
            },
            d: 4,
            e: {
                f: {
                    g: 5
                }
            }
        },
        watch: {
            a: function (val, oldVal) {
               console.log('new: %s, old: %s', val, oldVal)
            },
            // 方法名
            b: 'someMethod',
            // 深度 watcher
            c: {
                handler: function (val, oldVal) {
                    console.log('new: %s, old: %s', val, oldVal)
                },
                deep: true
            },
            // 该回调将会在侦听开始之后被立即调用
            d: {
                handler: function (val, oldVal) { 
                    console.log('new: %s, old: %s', val, oldVal)
                 },
                immediate: true
            },
            e: [
                function handle1 (val, oldVal) {
                    console.log('new: %s, old: %s', val, oldVal)
                },
                function handle2 (val, oldVal) { 
                    console.log('new: %s, old: %s', val, oldVal)
                }
            ],
            // watch vm.e.f's value: {g: 5}
            'e.f': function (val, oldVal) { 
                console.log('new: %s, old: %s', val, oldVal)
            }
        }
    })
    vm.c.val.num = 12
    // vm.e.f = 23;
    vm.a = 2 // => new: 2, old: 1


</script>

</html>